<template>
    <div>
        <el-dialog v-model="visible" :title="`重置密码【${user.nickName}】`" center draggable :before-close="close"
            :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close width="500px">
            <div v-loading="loading">
                <el-form ref="formRef" :model="formData" label-width="85px" label-position="right" status-icon
                    label-suffix=":">
                    <el-form-item label="新密码" prop="newPassword"
                        :rules="{ required: true, pattern: null || /^[0-9a-zA-Z_*]{6,30}$/, message: '新密码必须为6~30位数字、字母、下划线！', trigger: ['blur', 'change'] }">
                        <el-input v-model="formData.newPassword" placeholder="请输入新密码"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="repPassword"
                        :rules="{ required: true, validator: passwordValidator, trigger: 'blur' }">
                        <el-input type="password" v-model="formData.repPassword" placeholder="请再次输入新密码"
                            clearable></el-input>
                    </el-form-item>
                </el-form>
                <el-row justify="center" class="mt10">
                    <el-button type="primary" @click="submitForm">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
import { notify } from '@/utils/element';
import { updatePassword } from '@/api/system/user';
import { Loading } from '@element-plus/icons-vue';

// 表单ref
const formRef = ref();
// 声明状态
const state = reactive({
    visible: false,
    loading: false,
    user: {} as SysUserType, // 待重置用户
    // 表单数据
    formData: {} as PwdResetForm
});

const {visible, loading, user, formData} = {...toRefs(state)}

// 暴露为公有的，父组件可直接修改和访问
defineExpose({open})

// 打开窗口
function open(user: SysUserType) {
    state.user = user
    state.formData.userId = user.id
    state.visible = true
}

// 关闭窗口
function close() {
    if (state.loading) return
    formRef.value?.resetFields()
    state.visible = false
}

// 校验再次输入的密码是否一致
const passwordValidator = (rule: any, value: string, callback: Function) => {
    if (value === '') return callback(new Error("确认密码为必填项"))
    if (state.formData.newPassword !== value) {
        console.log('state.formData.newPassword', state.formData.newPassword)
        console.log('value', value)
        callback(new Error('两次输入的密码不一致'))
    } else {
        callback()
    }
}

// 提交表单数据
function submitForm() {
    formRef.value?.validate(async(valid:any) => {
        if (!valid) return false
        try {
            // 发送请求
            state.loading = true
            await updatePassword(state.formData)
            state.loading = false
            notify('密码修改成功', {type: 'success'})
            close()
        } catch(error) {

        } finally {
            state.loading = false
        }
    })
}
</script>

<style scoped></style>